<!-- 我正在开发 我是刘瑶瑶 QQ：1778851996 昵称：喑 -->
<!-- 这是地址管理列表 -->
<template>
	<view>
		<block v-for="(item, index) in list" :key="index">
			<my-swipe-action-item @swipeClick="swipeClick($event, item)" @swipeChange="swipeChange($event,index)" :show="activeIndex==index">
				<view class="per-record">
					<view class="per-left">
						<view class="per-address">{{item.locationAddress}}</view>
						<view class="per-time">提交时间：{{item.time}}</view>
					</view>
					<view class="icon iconfont icon-youjiantou arrow"></view>
				</view>
			</my-swipe-action-item>
			<view class="myline"></view>
		</block>
		<!-- 加载更多 -->
		<view class="load-more">{{loadtext}}</view>
		<!-- 加号 -->
		<template v-if="isvisible">
			<uni-fab
				:pattern="pattern"
				:content="content"
				horizontal="right"
				vertical="bottom"
				:popMenu="false"
				@fabClick="goToAdd"
			></uni-fab>
		</template>
		<!-- 删除确认弹窗 -->
		<xy-dialog title="提示" content="确认删除此位置信息" :is_show="showDialog" @cancelButton="cancel" @confirmButton="delConfirm"></xy-dialog>
	</view>
</template>

<script>
	import app from '@/common/app.js';
	import fab from '@/components/uni-fab/uni-fab.vue'
	export default {
		components: {
			fab
		},
		data() {
			return {
				// 按钮显示
				isvisible: true,
				activeIndex:-1,
				// 显示弹出层
				showDialog: false,
				// 是否有更多数据
				isMore: true,
				// 当前页
				page: 0,
				// 加载文字
				loadtext: '加载中···',
				// 数据列表
				list: [],
				// 点击删除项的id
				delId: '',
				// 加号样式
				pattern: {
					buttonColor: '#6DDDCB'
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 0;
			this.getData()
		},
		onHide() {
			this.activeIndex = -1;
		},
		//监听页面滚动
		onPageScroll(e){
			// console.log(e)
			if(e.scrollTop==0){
				this.addBtn();
			}
		},
		// 监听触底动作
		onReachBottom(){
			this.loadmore();
		},
		methods: {
			// 获取列表数据
			getData() {
				console.log('请求第n页数据n='+this.page);
				app.callFunction('get_location', { "offset": this.page * 10 }, (data, e) => {
					if(this.page==0){
						this.list = [];
					}
					// 获取一次，页码增加一次
					this.page++
					// 将新的数据存入数据列表
					this.list = this.list.concat(data)
					// 当记录条数小于10时，则为最后一页数据
					if (data.length < 10) {
						this.loadtext = '所有记录均已显示'
						this.isMore = false
					}
				})
			},
			// 上拉加载更多
			loadmore() {
				if (this.isvisible) {
					this.isvisible = false
				}
				// 当还存在数据时，再次加载数据
				if (this.isMore) {
					this.getData()
				}
			},
			swipeClick(e, msg){
				if (e.index == 0) {
					// 重置跳转传参
					uni.navigateTo({
						url: '/pages/location/content/content?_id=' + msg._id + '&locationAddress=' + msg.locationAddress
					})
				} else {
					console.log(msg._id)
					// 删除
					console.log(this.showDialog)
					this.showDialog = true
					this.delId = msg._id
				}
			},
			// 滑动展开
			swipeChange(e,index){
				// console.log(e,index);
				if(e) {
					this.activeIndex = index;
				}
			},
			// 点击取消隐藏弹出层
			cancel() {
				this.showDialog = false
			},
			// 点击确认并删除
			delConfirm() {
				app.callFunction('delete_location',
					{
						_id: this.delId
					}, (data, e) => {
						console.log(e)
						if (e.code == '0000') {
							uni.hideLoading()
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							this.list = []
							this.activeIndex = -1
							this.page = 0
							this.showDialog = false
							this.getData()
						}
					})
			},
			// 跳转添加页
			goToAdd() {
				uni.navigateTo({
					url: '/pages/location/content/content'
				})
			},
			// 显示添加按钮
			addBtn() {
				this.isvisible = true
			}
		}
	}
</script>
	
<style lang="less" scoped>
	@import '../../../common/iconfont.css';
	/* 地址图标 */
	.address {
		margin-right: 10rpx;
		color: #6DDDCB;
		font-size: 44rpx;
	}
	// 每一条记录
	.per-record {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 160rpx;
		box-sizing: border-box;
		padding: 0 40rpx;
		// border-bottom: 1rpx solid #ddd;
	}
	// 列表项分割线
	.myline{
		width: 750rpx;
		height: 1px;
		transform: scaleY(0.1);
		background-color: rgba(0,0,0,0.5);
	}
	// 每条记录左边
	.per-left {
		position: relative;
		width: 550rpx;
		height: 120rpx;
		font-size: 32rpx;
		color: #333;
	}
	// 每条记录时间
	.per-time {
		position: absolute;
		bottom: 0;
		font-size: 27rpx;
		color: #ccc;
	}
	// 右箭头图标
	.arrow {
		font-size: 40rpx;
		color: #ddd;
	}
	// 加载更多
	.load-more {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		font-size: 30rpx;
		color: #AAAAAA;
	}
</style>
